<template>
  <base-table
    :url="url"
    :table-field-list="tableFieldList"
    :submit-form="submitForm"
    submit-form-title="合同信息"
    :fixed-func-btn="fixedFuncBtn"
    @data-format="dataFormat"
    @set-form-init-value="setFormInitValue"
    @submit-valid="submitValid"
  >
    <template #submitForm>
      <el-form
        :model="submitForm"
        :rules="formRules"
        :label-width="100"
        ref="submitFormRef"
      >
        <el-form-item label="合同编号：" prop="no">
          <el-input v-model="submitForm.no"></el-input>
        </el-form-item>
        <el-form-item label="合同名称：" prop="name">
          <el-input v-model="submitForm.name"></el-input>
        </el-form-item>
        <el-form-item label="客户编号：" prop="customerNo">
          <autocomplete-input
            v-model="submitForm.customerNo"
            :value-key="selectedPropMap.selectedOriginProp"
            @get-record="getRecords"
            @change="
              setSelectRow(
                selectedPropMap.setProp,
                selectedPropMap.setOriginProp,
                selectedPropMap.selectedProp
              )
            "
            @select="
              setSelectRow(
                selectedPropMap.setProp,
                selectedPropMap.setOriginProp,
                selectedPropMap.selectedProp
              )
            "
          ></autocomplete-input>
        </el-form-item>
        <el-form-item label="客户名称：" prop="customerName">
          <el-input v-model="submitForm.customerName" disabled></el-input>
        </el-form-item>
        <el-form-item label="签约日期：" prop="contractDate">
          <el-date-picker
            v-model="submitForm.contractDate"
            type="date"
            placeholder="请选择日期"
          />
        </el-form-item>
        <el-form-item label="开始日期：" prop="startDate">
          <el-date-picker
            v-model="submitForm.startDate"
            type="date"
            placeholder="请选择日期"
          />
        </el-form-item>
        <el-form-item label="结束日期：" prop="endingDate">
          <el-date-picker
            v-model="submitForm.endingDate"
            type="date"
            placeholder="请选择日期"
          />
        </el-form-item>
        <el-form-item label="状态码：" prop="statusCode">
          <el-input v-model="submitForm.statusCode"></el-input>
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-input v-model="submitForm.status"></el-input>
        </el-form-item>
        <el-form-item label="合同总金额：" prop="totalAmount">
          <el-input v-model="submitForm.totalAmount"></el-input>
        </el-form-item>
        <el-form-item label="合同进度：" prop="progress">
          <el-input v-model="submitForm.progress"></el-input>
        </el-form-item>
      </el-form>
    </template>
  </base-table>
  <annex-dialog v-model="testDialogVisible"></annex-dialog>
</template>

<script lang="ts" setup>
import BaseTable from "@/components/table/basic/BaseTable.vue";
import { FixedFuncBtn, TableField, TableUrl } from "@/models/TableSetting";
import { ref } from "vue";
import api from "@/utils";
import { Contract } from "@/models/sales/Contract";
import AutocompleteInput from "@/components/input/AutocompleteInput.vue";
import AnnexDialog from "@/components/dialog/annex/AnnexDialog.vue";
import { SelectedPropMap } from "@/components/input/SelectedPropMap";
import { AutocompleteInputEvent } from "@/components/input/AutocompleteInputEvent";

const url = {
  refreshUrl: "/basic-request/Contract",
  modifyingSingleUrl: "/basic-request/Contract",
  deleteUrl: "/basic-request/Contract/batchDelete",
} as TableUrl;

const testDialogVisible = ref(false);

const tableFieldList = [
  {
    filedName: "no",
    label: "合同编号",
    width: 220,
  },
  {
    filedName: "name",
    label: "合同名称",
    width: 220,
  },
  {
    filedName: "customerNo",
    label: "客户编号",
    width: 220,
  },
  {
    filedName: "customerName",
    label: "客户名称",
    width: 220,
  },
  {
    filedName: "contractDate",
    label: "签约日期",
    width: 220,
  },
  {
    filedName: "startDate",
    label: "开始日期",
    width: 220,
  },
  {
    filedName: "endingDate",
    label: "结束日期",
    width: 220,
  },
  {
    filedName: "statusCode",
    label: "状态码",
    width: 220,
  },

  {
    filedName: "status",
    label: "状态",
    width: 220,
  },
  {
    filedName: "totalAmount",
    label: "合同总金额",
    width: 220,
  },

  {
    filedName: "progress",
    label: "合同进度",
    width: 220,
  },
  {
    filedName: "createUser",
    label: "创建人",
    width: 220,
  },
  {
    filedName: "createGmt",
    label: "创建时间",
    width: 220,
  },
  {
    filedName: "modifiedUser",
    label: "修改人",
    width: 220,
  },
  {
    filedName: "modifiedGmt",
    label: "修改时间",
    minWidth: 220,
  },
] as Array<TableField>;
// 校验规则
const formRules = {
  no: [
    {
      required: true,
      message: "合同编号不能为空",
      trigger: "blur",
    },
  ],
  name: [
    {
      required: true,
      message: "合同名称不能为空",
      trigger: "blur",
    },
  ],
  customerNo: [
    {
      required: true,
      message: "客户编号不能为空",
      trigger: "blur",
    },
    {
      required: true,
      message: "客户编号不能为空",
      trigger: "change",
    },
  ],
  customerName: [
    {
      required: true,
      message: "客户名称不能为空",
      trigger: "blur",
    },
  ],
  contractDate: [
    {
      required: true,
      message: "签约日期不能为空",
      trigger: "blur",
    },
  ],
  startDate: [
    {
      required: true,
      message: "开始日期不能为空",
      trigger: "blur",
    },
  ],
  endingDate: [
    {
      required: true,
      message: "结束日期不能为空",
      trigger: "blur",
    },
  ],
  statusCode: [
    {
      required: true,
      message: "状态码不能为空",
      trigger: "blur",
    },
  ],
  status: [
    {
      required: true,
      message: "状态不能为空",
      trigger: "blur",
    },
  ],
  totalAmount: [
    {
      required: true,
      message: "合同总金额不能为空",
      trigger: "blur",
    },
  ],
};
// 数据规范, 表中没有需要规范格式的数据, 则不需要这一行.
const dataFormat = (
  columnName: string,
  cellValue: string,
  callback: (value: string) => void
) => {
  if (
    columnName === "contractDate" ||
    columnName === "startDate" ||
    columnName === "endingDate"
  ) {
    const date = new Date(cellValue);
    const dateFormat = api.formatDate(date, "yyyy年MM月dd日");
    callback(dateFormat);
  }
};

// 申明表单
const submitFormRef = ref();

const submitForm = ref({} as Contract);

const setFormInitValue = (formType: string, row: Contract) => {
  if (undefined !== submitFormRef.value) {
    submitFormRef.value.clearValidate();
  }
  switch (formType) {
    case "insert":
      submitForm.value = {
        name: "",
        no: "",
        customerNo: "",
        customerName: "",
        contractDate: new Date(),
        startDate: new Date(),
        endingDate: new Date(),
        statusCode: "",
        status: "",
        totalAmount: 0,
        progress: "",
        createUser: sessionStorage.getItem("token") as string,
        createGmt: new Date(),
      } as Contract;
      break;
    case "update":
      submitForm.value = row;
      submitForm.value.modifiedUser = sessionStorage.getItem("token") as string;
      submitForm.value.modifiedGmt = new Date();
      break;
  }
};

//远程搜索和名称跟随
const selectedPropMap = {
  selectedProp: "customerNo",
  selectedOriginProp: "no",
  setProp: "customerName",
  setOriginProp: "name",
} as SelectedPropMap;

const { getRecords, setSelectRow } = AutocompleteInputEvent(
  "/basic-request/Customer",
  submitForm,
  selectedPropMap
);
/**
 * 提交数据前的校验
 * @param callback 回调函数,将校验结果返还到Table组件中.
 */
const submitValid = (callback: (value: boolean) => void) => {
  submitFormRef.value
    .validate()
    .then(() => {
      callback(true);
    })
    .catch(() => {
      callback(false);
    });
};

/**
 * 表单扩展方法的申明
 */
const fixedFuncBtn = ref({
  width: 180,
  button: [
    {
      name: "附件管理",
      icon: "list",
      type: "text",
      method: (row: Contract) => {
        console.log(row);
        testDialogVisible.value = true;
      },
    },
  ],
} as FixedFuncBtn);
</script>

<style scoped></style>
